<template>
  <div>
    <div class="comments">
      <div :style="{ display: display }">
        <div class="comments-top" v-if="!isWrite" v-loading="loading">
          <div class="grmessage">
            <div>
              <img :src="userList.uimg" alt="" />
              <div>{{ userList.uname }}</div>
            </div>
            <div @click="writeShow">
              <el-rate class="iconsts" v-model="value"> </el-rate>
            </div>
            <div>给个评价吧~</div>
          </div>

          <div class="xieping" @click="writeShow">
            <img src="../../../../assets/img/xie.svg" alt="" />
            <div>写评论</div>
          </div>
        </div>

        <div class="myping-box" v-else>
          <div class="myping-top">
            <div class="woping">
              <div>我的评价</div>
              <div>|</div>
              <span class="rgame-xing">
                <span>
                  <img
                    v-for="(item, index) in xing"
                    :key="index"
                    src="../../../../assets/img/hxing.svg"
                    alt=""
                  />
                </span>
                <span>
                  <img
                    v-for="(item, index) in nxing"
                    :key="index"
                    src="../../../../assets/img/nxing.svg"
                    alt=""
                  />
                </span>
              </span>
            </div>

            <div class="xuanze">
              <div @click="deleMyPing(myPing.cid)">删除</div>
              <div>|</div>
              <div @click="writeShow">修改</div>
            </div>
          </div>
          <div class="myping">
            {{ myPing.ccontent }}
          </div>
        </div>
      </div>
      <comm-message></comm-message>
    </div>
    <div v-if="write">
      <write-comments
        :gameList="gameList"
        :uid="uid"
        :gid="gid"
        :myPing="myPing"
        v-on:childByOut="childByOut"
      ></write-comments>
    </div>
  </div>
</template>

<script>
import {
  isComment,
  showGameMessage,
  myGameComment,
  delComment,
} from "../../../../network/showGame";

import { userMessage } from "../../../../network/usermes";

import WriteComments from "../../../../components/writecomments/writeComments";
import CommMessage from "./commMessage";
export default {
  components: { CommMessage, WriteComments },
  name: "Comments",
  data() {
    return {
      value: null,
      write: false,
      isWrite: false,
      gid: window.location.pathname.split("/")[2],
      uid: this.$Cookie.get("userid"),
      gameList: "",
      display: "block",
      myPing: "",
      xing: "",
      nxing: "",
      userList: "",
      loading: true,
    };
  },
  created() {
    this.getComment();
    this.showGame();
    this.userMes();
  },
  methods: {
    childByOut(childValue) {
      this.write = childValue;
      this.getComment();
    },

    writeShow() {
      this.write = true;
      this.value = "";
    },

    userMes() {
      userMessage(this.uid).then((res) => {
        this.userList = res.data.data;
      });
    },

    getComment() {
      if (this.uid != null) {
        isComment(this.gid, this.uid).then((res) => {
          this.isWrite = res.data.data;
          this.loading = false;
          if (res.data.data) {
            myGameComment(this.gid, this.uid).then((res) => {
              this.myPing = res.data.data;
              if (res.data.data.cscore == 10 || res.data.data.cscore >= 9.5) {
                this.xing = 5;
                this.nxing = 0;
              } else if (res.data.data.cscore >= 7.5) {
                this.xing = 4;
                this.nxing = 1;
              } else if (res.data.data.cscore >= 6) {
                this.xing = 3;
                this.nxing = 2;
              } else if (res.data.data.cscore >= 4) {
                this.xing = 2;
                this.nxing = 3;
              } else if (res.data.data.cscore >= 2) {
                this.xing = 1;
                this.nxing = 4;
              } else {
                this.xing = 0;
                this.nxing = 5;
              }
              console.log(this.myPing);
            });
          }
        });
      } else {
        this.display = "none";
      }
    },

    showGame() {
      showGameMessage(this.gid, this.uid).then((res) => {
        this.gameList = res.data.data;
        console.log(this.gameList);
      });
    },

    deleMyPing(cid) {
      this.$confirm("确定删除该信息吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.myPing = "";
          delComment(cid, this.gid).then((res) => {
            console.log(res);
            this.getComment();
            this.$store.commit("changState2");
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.comments {
  width: 80%;
  margin: 0 auto;
  margin-top: 0.2rem;
  margin-bottom: 0.8rem;
}

.iconsts i {
  font-size: 0.2rem;
}

.comments-top {
  display: flex;
  border-bottom: 1px solid rgb(202, 200, 198);
  padding-bottom: 0.2rem;
}

.grmessage img {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
}

.grmessage {
  text-align: center;
  flex: 1;
}

.grmessage div:nth-child(1) div {
  font-size: 0.12rem;
  margin-top: 0.05rem;
  margin-bottom: 0.08rem;
}

.grmessage div:nth-child(3) {
  margin-top: 0.2rem;
  font-size: 0.08rem;
}

.xieping {
  display: flex;
  cursor: pointer;
  font-size: 0.09rem;
  color: rgb(95, 189, 252);
}

.xieping img {
  width: 0.15rem;
  height: 0.15rem;
}

.myping-top {
  display: flex;
}

.woping {
  flex: 1;
  display: flex;
  align-items: center;
}

.woping div:nth-child(1),
.woping div:nth-child(2) {
  font-size: 0.1rem;
  padding-right: 0.1rem;
  color: rgb(160, 161, 161);
}

.woping img {
  width: 0.12rem;
  height: 0.12rem;
  margin-left: 0.02rem;
}

.xuanze {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.08rem;
  color: rgb(160, 161, 161);
}

.xuanze div:nth-child(1),
.xuanze div:nth-child(3) {
  cursor: pointer;
}

.xuanze div:nth-child(2) {
  margin: 0 0.07rem 0 0.07rem;
}

.myping {
  margin-top: 0.1rem;
  font-size: 0.1rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgb(194, 193, 192);
}
</style>